import { View, Text, ScrollView } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import NavBar from '@/components/NavBar'
import OrderItem from './components/OrderItem'
import './index.scss'

export default function OrderList() {
  useLoad(() => {
    console.log('Order list page loaded')
  })

  // TODO: 对接真实数据
  const orders = [{
    id: '202405201234',
    orderNo: 'NO20240520123456',
    status: 2,
    totalAmount: 598,
    payAmount: 598,
    createTime: '2024-05-20 14:30',
    goods: [{
      id: 1,
      goodsId: 1001,
      goods: {
        id: 1001,
        title: '男士商务衬衫',
        price: 299,
        cover: 'https://via.placeholder.com/200'
      },
      quantity: 2,
      price: 299
    }]
  }]

  return (
    <View className='order-list-page'>
      <NavBar title='我的订单' />
      
      <ScrollView
        scrollY
        className='order-scroll'
        enableBackToTop
        scrollWithAnimation
      >
        <View className='status-filter'>
          {['全部', '待付款', '待发货', '待收货', '已完成'].map((text, index) => (
            <Text key={index} className='filter-item'>{text}</Text>
          ))}
        </View>

        {orders.map(order => (
          <OrderItem
            key={order.id}
            data={order}
            onDetail={() => console.log('查看详情')}
            onCancel={() => console.log('取消订单')}
          />
        ))}
      </ScrollView>
    </View>
  )
}